<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8"/>
	<title>welcome!</title>
	<style>
		.active{
			background:yellow;
		}
		#cc div{
			width:200px;
			height:300px;
			border:1px solid black;
			display:none;
		}
	</style>
	<script>
		window.onload=function(){
			var div=document.getElementById("cc");
			var btns=div.getElementsByTagName("input");
			var divs=div.getElementsByTagName("div");
			//作用域2
			for(var i=0;i<btns.length;i++){
				btns[i].index=i;//作用域1
				btns[i].onclick=function(){
					for(var j=0;j<btns.length;j++){
						btns[j].className=null;
						divs[j].style.display="none";
					}
					this.className="active";
					//alert(btns[i]);执行环境的作用域
					//即在该闭包中只能访问到作用域1 作用域2的变量
					//写成btns[i].className="avtive",i的值始终为4所以报错
					divs[this.index].style.display="block";
				};
				
			}
		};
	</script>
</head>
<body>
	<div id="cc">
		<input type="button" value="教育"/>
		<input type="button" value="培训"/>
		<input type="button" value="招生"/>
		<input type="button" value="出国"/>
		<div style="display:block">111</div>
		<div>222</div>
		<div>333</div>
		<div>444</div>
	</div>
</body>
</html>